<template>
    <!-- 使用a-row和a-col组件 -->
    <!-- gutter="16"卡片之间的间距
                        a-col组件创建列，并将每个卡片放置在一个列中
                        span="8"属性，将每个列的宽度设置为8个栅格单位，一行就可以容纳4个卡片。 -->
    <!-- <a-row :gutter="16">
        <a-col :span="6" v-for="(item, index) in data" :key="index" v-show="item.tag === '分配但有问题'">
            <a-card :title="item.class" :style="{ backgroundColor: 'lightpink' }">
                <template #extra><a href="#">more</a></template>
                <p>考试：{{ item.exam }}</p>
                <p>监考1: {{ item.teacher1 }}</p>
                <p>监考2: {{ item.teacher2 }}</p>
                <p>标签: {{ item.tag }}</p>
            </a-card>
        </a-col>
    </a-row> -->
    <a-row :gutter="16">
        <a-col :span="6" v-for="(item, index) in filteredData" :key="index">
            <a-card :title="item.class" :style="{ backgroundColor: 'lightpink' }">
                <template #extra>
                    <moreAndModal :moreData="dataSource" @updateParentValue="updateParentValue"></moreAndModal>
                    <!-- <a class="more-link" href="#" @click="setOpen()">more</a> -->
                </template>
                <p>考试：{{ item.exam }}</p>
                <p>监考1: {{ item.teacher1 }}</p>
                <p>监考2: {{ item.teacher2 }}</p>
                <p>标签: {{ item.tag }}</p>
            </a-card>
        </a-col>
    </a-row>
    <!-- <div>
        <more v-if="open" :moreData="dataSource" @updateParentValue="updateParentValue"></more>
    </div> -->
</template>

<!-- setup -->
<script setup>
import { ref } from 'vue';
import moreAndModal from './moreAndModal.vue';

const open = ref(false);

function setOpen() {
    open.value = !open.value;
}

const parentValue = ref('Hello from parent!');

const updateParentValue = (newValue) => {
    parentValue.value = newValue;
};

const dataSource = [
    {
        key: '1', //分配记录ID  
        exam: 'CET4', //考试ID  
        class: '考场1', //考场ID  
        teacher1: '教师1', //监考1报名ID  
        teacher2: '教师2', //监考1报名ID  
        tag: '正确分配', //是否正确分配  
    },
    {
        key: '2',
        exam: 'CET4',
        class: '考场2',
        teacher1: '教师3',
        teacher2: '教师4',
        tag: '正确分配',
    },
    {
        key: '3',
        exam: 'CET6',
        class: '考场3',
        teacher1: '教师5',
        teacher2: '教师6',
        tag: '分配但有问题',
    },
    {
        key: '4',
        exam: '未分配',
        class: '考场4',
        teacher1: '未分配',
        teacher2: '未分配',
        tag: '未分配',
    },
];

let filteredData = []

const changeData = () => {
    filteredData = dataSource.filter(item => item.tag === '分配但有问题');
};

changeData()

</script>

<style>
.more-link {
    display: inline-block;
    /* 将元素显示方式设置为内联块级元素 */
    padding: 3px;
    /* 设置内边距为 10 像素 */
    background-color: red;
    /* 设置背景颜色为红色 */
    border-radius: 5px;
    /* 设置边框圆角半径为 10 像素 */
    color: white;
    /* 设置文本颜色为白色 */
    text-decoration: none;
    /* 移除超链接的默认下划线 */
}


#components-layout-demo-top-side-2 .logo {
    float: left;
    width: 120px;
    height: 31px;
    margin: 16px 24px 16px 0;
    background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
    float: right;
    margin: 16px 0 16px 24px;
}

.site-layout-background {
    background: #fff;
}

.menu {
    font-size: 24px;
}
</style>